<!DOCTYPE html>
<html>
<head>
    <title>Force Diagram of Stacked Cylinders</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Parameters ---
        const R = 80; // Radius of the circles
        const canvasWidth = canvas.width;
        const canvasHeight = canvas.height;
        
        // Position the structure in the canvas
        const groundY = 350;
        const centerX = canvasWidth / 2;
        
        // Calculate centers of the circles
        // The centers form an equilateral triangle with side length 2R
        const c1x = centerX - R;
        const c1y = groundY - R;
        const c2x = centerX + R;
        const c2y = groundY - R;
        const c3x = centerX;
        const triangleHeight = R * Math.sqrt(3);
        const c3y = c1y - triangleHeight;

        // --- Drawing Styles ---
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.fillStyle = 'black';

        // --- Draw Circles ---
        ctx.beginPath();
        ctx.arc(c1x, c1y, R, 0, 2 * Math.PI);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(c2x, c2y, R, 0, 2 * Math.PI);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(c3x, c3y, R, 0, 2 * Math.PI);
        ctx.stroke();

        // --- Draw Ground Line ---
        ctx.beginPath();
        const groundStart = centerX - 2.5 * R;
        const groundEnd = centerX + 2.5 * R;
        ctx.moveTo(groundStart, groundY);
        ctx.lineTo(groundEnd, groundY);
        ctx.stroke();

        // --- Draw Dashed Triangle connecting the centers ---
        ctx.beginPath();
        ctx.setLineDash([6, 4]);
        ctx.moveTo(c1x, c1y);
        ctx.lineTo(c2x, c2y);
        ctx.lineTo(c3x, c3y);
        ctx.closePath();
        ctx.stroke();
        ctx.setLineDash([]); // Reset line dash to solid

        // --- Draw Labels ---
        // Set font for Greek letters with subscripts
        ctx.font = 'italic 22px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // μ₁ labels for friction between cylinders
        // Positioned inside the dashed triangle near the bottom vertices.
        const mu1_x_offset = R * 0.45;
        const mu1_y_offset = R * 0.45;
        ctx.fillText('μ₁', c1x + mu1_x_offset, c1y - mu1_y_offset);
        ctx.fillText('μ₁', c2x - mu1_x_offset, c2y - mu1_y_offset);

        // μ₂ labels for friction with the ground
        // Positioned below the ground line at the contact points
        const mu2_y_offset = 25;
        ctx.fillText('μ₂', c1x, groundY + mu2_y_offset);
        ctx.fillText('μ₂', c2x, groundY + mu2_y_offset);

        // --- Draw Caption ---
        ctx.font = '24px "SimSun", "Songti SC", sans-serif'; // Use common Chinese fonts
        const captionY = groundY + 70;
        ctx.fillText('力图 5.5.1', centerX, captionY);

    </script>
</body>
</html>